<template>
  <div class="flex chart-type-pie-box justify-around items-center">
    <div class="gauge-progress-box">
      <div
        :id="uuid"
        ref="chart"
        :style="{
          width: '100%',
          height: '100px',
        }"
      ></div>
    </div>
    <div class="right-box p-2">
      <div class="flex justify-between mb-2 ctp-text ctp-text-1">
        <span>
          <i></i>
          {{ translateTitle('Base.components.总量') }}
        </span>
        <span class="value">{{ data.total }}</span>
      </div>
      <div class="flex justify-between mb-2 ctp-text ctp-text-2">
        <span>
          <i></i>
          {{ translateTitle('Base.components.已使用') }}
        </span>
        <!-- <span class="value">{{ data.usedSpace }}</span> -->
        <span class="value">{{ data.total - data.freeSpace }}</span>
      </div>
      <div class="flex justify-between mb-2 ctp-text ctp-text-3">
        <span>
          <i></i>
          {{ translateTitle('Base.components.剩余') }}
        </span>
        <span class="value">{{ data.freeSpace }}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'ChartTypePie',
    components: {},
    mixins: [],
    props: {
      uuid: {
        type: String,
        default: '',
      },
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        myChart: null,
      }
    },
    watch: {
      data: {
        handler() {
          this.initChart(this.data)
        },
      },
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart(this.data)
      })
    },
    methods: {
      translateTitle,
      initChart(val) {
        if (!this.myChart) {
          let chartDom = this.$refs.chart
          this.myChart = echarts.init(chartDom)
        }
        let _data = [
          {
            value: val.total - val.freeSpace,
          },
          {
            value: val.total,
          },
          {
            value: val.freeSpace,
          },
        ]
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          series: [
            {
              name: translateTitle('Base.components.磁盘占用'),
              type: 'pie',
              radius: ['0%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: _data,
            },
          ],
        }

        option && this.myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .gauge-progress-box {
    height: 100px;
  }
  .gauge-progress-num {
    position: relative;
    top: -30px;
    font-size: 18px;
    font-weight: 700;
  }
  .gauge-progress-name {
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -20px;
  }
  .chart-type-pie-box {
    .right-box {
      border-right: 1px solid #eceff8;
    }
  }
  .ctp-text i {
    width: 6px;
    height: 6px;
    background-color: #999;
    display: inline-block;
    border-radius: 10px;
    margin-right: 4px;
  }
  .ctp-text-1 {
    i {
      background-color: #91cc75;
    }
    .value {
      color: #666666;
    }
  }
  .ctp-text-2 {
    i {
      background-color: #017aff;
    }
    .value {
      color: #017aff;
    }
  }
  .ctp-text-3 {
    i {
      background-color: #f9c651;
    }
    .value {
      color: #f9c651;
    }
  }
</style>
